<template>
    <rx-layout>
        <template v-slot:center>
            <view class="message" v-if="leaveMsges.length !=0">
                <div class="message-list" v-for="(obj,index) in leaveMsges" :key="index">
                    <div class="message-img">
                        <image src="@/static/male.png"></image>
                    </div>
                    <div class="message-centre">
                        <div class='message-author'><span
                            style="flex: 1">{{ obj.author }}</span><span>{{ obj.createTime }}</span></div>
                        <div class='message-content'>{{ obj.content }}</div>
                    </div>
                </div>
            </view>
        </template>
        <template v-slot:footer>
            <div class="message-bottom">
                <div class="message-input">
                    <i class="message-iconfont iconfont icon-brush"></i>
                    <input :type="type" :auto-height="autoHeight" :placeholder="i18n('leaveMsg','输入留言')" v-model="leaveMsg"/>
                </div>
                <div class="message-send">
                    <button @click="enterLeaveMsg">{{i18n('sending','发送')}}</button>
                </div>
            </div>
        </template>
    </rx-layout>
</template>

<script>
import RxLayout from '@/components/RxLayout';
import RxVueUserDialog from '@/components/RxVueUserDialog';
import BpmInstMsgApi from "@/api/rxBpm/bpmInstMsg";

export default {
    name: "BpmAmessage",
    data() {
        return {
            leaveMsges: [],
            leaveMsg: '',
            msgSubmitting: false,
            instId: '',
            autoHeight: true,
            type: 'textarea',
        }
    },
    components: {
        RxLayout,
        RxVueUserDialog
    },
    onLoad(option) {
        let optionData = JSON.parse(option.data);
        this.instId = optionData.instId;
        this.loadInstMsg()
    },
    methods: {
        i18n(name,text,key){
            return this.$ti18(name,text,"bpmTaskLang.BpmAmessage",key);
        },
        //加载内部消息
        loadInstMsg() {
            let _self = this;
            BpmInstMsgApi.getByInstId(this.instId).then(data => {
                _self.leaveMsges = data;
            });
        },
        enterLeaveMsg() {
            BpmInstMsgApi.addMsg(this.instId, this.leaveMsg).then(resp => {
                this.msgSubmitting = false;
                if (!resp.success) {
                    return;
                }
                this.leaveMsges.push(resp.data);
                this.leaveMsg = '';

            });
        }
    }
}
</script>

<style scoped>
.message-list {
    overflow: hidden;
    background-color: white;
    padding: 0.5rem;
    border-radius: 5px;
    box-shadow: 1px 1px 5px #dce1e6;
    margin-bottom: 0.5rem;
}

.message-img {
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    float: left;
    box-shadow: 1px 1px 5px #dce1e6;
    overflow: hidden;
}

.message-img image {
    width: 100%;
    height: 100%;
}

.message-centre {
    float: left;
    width: calc(100% - 1.5rem);
    overflow: hidden;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    box-sizing: border-box;
}

.message-author {
    overflow: hidden;
    display: flex;
    align-items: center;
}

.message-content {
    color: #95a5b8;
    font-size: .7rem;
    background-color: #f0f4f9;
    border-radius: 5px;
    padding: .2rem .5rem .2rem .5rem;
    position: relative;
    margin-top: 10px;
}

.message-bottom {
    display: flex;
    align-items: center;
}

.message-input {
    background-color: #eeeeee;
    padding-left: .5rem;
    border-radius: 1rem;
    margin-top: .5rem;
    flex: 1;
    height: 2rem;
    margin-left: .5rem;
    display: flex;
    align-items: center;
}

.message-send button {
    width: 4rem;
    height: 2rem;
    background-color: #007aff;
    border-radius: 1rem;
    font-size: .8rem;
    padding: 0rem;
    color: white;
    margin-top: .5rem;
}

.message-send {
    width: 5rem;
}

</style>
